<template>
  <div class="container">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="header-left">
        <img class="coin-logo" src="/tb.jpg" alt="logo" />
        <div class="title-container">
          <div class="title">
            <span class="title-amount">{{ currentCoinBalanceDisplay }}</span>
            <span class="title-unit">铜板</span>
          </div>
          <span class="subtitle">学习赚铜板，铜板当钱花~</span>
        </div>
      </div>
      <div class="header-right">
        <div class="header-icons-row">
          <img class="nav-icon" src="/search.png" alt="search" />
          <img class="nav-icon" src="/headphone.png" alt="headphone" />
          <img class="nav-icon" src="/user.png" alt="user" />
          <img class="nav-icon" src="/cart.png" alt="cart" />
        </div>
        <div class="header-button-row">
          <button class="earn-coin-button">去赚铜板 &gt;</button>
        </div>
      </div>
    </header>

    <!-- 分类导航 -->
    <nav class="category-nav">
      <div
        class="category-item"
				v-for="item in categories" 
				:key="item.key" 
        :class="{ active: item.key === selectedCategoryKey }"
				@click="selectCategory(item.key)"
      >
        <img class="category-icon" :src="'/' + item.icon" :alt="item.name" />
        <span class="category-text">{{ item.name }}</span>
      </div>
    </nav>

    <!-- 轮播图区域 -->
    <div class="banner-section">
      <div class="banner-swiper">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(img, idx) in bannerImages"
            :key="idx"
            :class="{ active: idx === bannerIndex }"
            v-show="idx === bannerIndex"
          >
            <img :src="'/' + img" class="banner-img" />
          </div>
        </div>
        <div class="swiper-pagination">
          <span
            v-for="(img, idx) in bannerImages"
            :key="idx"
            :class="{ dot: true, active: idx === bannerIndex }"
          ></span>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class="right-sidebar">
        <img src="/chaoshen.png" alt="chaoshen" class="right-sidebar-img" />
      </div>
    </div>

    <!-- 主内容区（示例：商品卡片） -->
    <main class="main-content">
      <div class="product-card" v-for="product in filteredProducts" :key="product.id">
        <img class="product-image" :src="'/' + product.image" :alt="product.title" />
        <div class="product-info">
          <div class="product-title">{{ product.title }}</div>
          <div class="product-subtitle">{{ product.subtitle }}</div>
          <div class="price-row">
            <span class="current-price">¥{{ product.originalPrice }}</span>
            <span class="payment-count">{{ product.paymentCount }}人付款</span>
          </div>
          <div class="actual-price-tag">
             <span>到手价</span>
             <span>¥{{ product.coinPrice }}</span>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部TabBar -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

// 分类数据
const categories = [
  { key: 'wenjubanlv', name: '文具伴侣', icon: 'wenjubanlv.png' },
  { key: 'dx', name: '大学备考', icon: 'dx.png' },
  { key: 'zx', name: '中学备考', icon: 'zx.png' },
  { key: 'xx', name: '小学备考', icon: 'xx.png' },
  { key: 'lw', name: '心意礼物', icon: 'lw.png' },
  { key: 'eng', name: '英文原著', icon: 'eng.png' }
];
const selectedCategoryKey = ref('wenjubanlv');

// 示例商品数据
const allProducts = [
  {
    id: 1,
    category: 'wenjubanlv',
    image: '1.png',
    title: '刮图书',
    subtitle: '39铜板',
    originalPrice: 39,
    coinPrice: 19.5,
    paymentCount: 12345
  },
  {
    id: 2,
    category: 'wenjubanlv',
    image: 'banner1.png',
    title: '两用中性笔 0.5mm',
    subtitle: '热销第1名',
    originalPrice: 9.8,
    coinPrice: 6.8,
    paymentCount: 57000 // 示例数据，需要替换为实际数据
  }
  // ...更多商品，需要为每个商品添加 paymentCount 属性
];

const currentCoinBalanceDisplay = ref(2015);

const filteredProducts = computed(() =>
  allProducts.filter(p => p.category === selectedCategoryKey.value)
);

function selectCategory(key) {
  selectedCategoryKey.value = key;
}

// 轮播图图片
const bannerImages = [
  'banner1.png',
  'banner2.png',
  'banner3.png'
];
const bannerIndex = ref(0);
let timer = null;
function nextBanner() {
  bannerIndex.value = (bannerIndex.value + 1) % bannerImages.length;
}
onMounted(() => {
  timer = setInterval(nextBanner, 3000);
});
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
/* 750 设计稿适配 rem 方案，需在 main.js 设置根字体 */
	.container {
  min-height: 100vh;
  background: #f7f8fa;
  font-size: 0.28rem;
  display: flex;
  flex-direction: column;
}
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
  padding: 0.4rem 0.3rem 0.2rem;
  background: linear-gradient(180deg, #eaf2ff 0%, #fff 100%);
}
	.header-left {
		display: flex;
		align-items: center;
	}
	.coin-logo {
  width: 0.8rem;
  height: 0.8rem;
		border-radius: 50%;
  margin-right: 0.2rem;
}
	.title-container {
		display: flex;
		flex-direction: column;
	}
	.title {
  font-size: 0.48rem;
		font-weight: bold;
		color: #333;
	}
	.title-amount {
  color: #ff9900;
	}
	.title-unit {
  font-size: 0.28rem;
  margin-left: 0.06rem;
  color: #444;
}
	.subtitle {
  font-size: 0.24rem;
		color: #999;
	}
	.header-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.header-icons-row {
		display: flex;
  gap: 0.18rem;
  margin-bottom: 0.1rem;
}
	.nav-icon {
  width: 0.4rem;
  height: 0.4rem;
}
	.earn-coin-button {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0.3rem;
  padding: 0.1rem 0.22rem;
  font-size: 0.24rem;
		color: #606060;
  margin-left: 0.25rem;
  box-shadow: 0 0.02rem 0.05rem rgba(0,0,0,0.05);
  cursor: pointer;
}
	.category-nav {
		display: flex;
		justify-content: space-around;
  padding: 0.3rem 0;
  background: #fff;
	}
	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
  font-size: 0.24rem;
  cursor: pointer;
}
.category-item.active .category-text {
  color: #ff6b00;
		font-weight: bold;
	}
.category-icon {
  width: 0.8rem;
  height: 0.8rem;
  margin-bottom: 0.1rem;
}
.main-content {
  padding: 0.3rem 0.2rem;
		display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  margin: 0 -0.1rem;
}
.product-card {
  width: calc(50% - 0.2rem);
  background: #fff;
  border-radius: 0.2rem;
  box-shadow: 0 0.04rem 0.2rem rgba(0,0,0,0.05);
  margin: 0 0.1rem 0.2rem 0.1rem;
		display: flex;
		flex-direction: column;
  align-items: center;
}
.product-image {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 0.1rem;
  margin-top: 0.2rem;
}
.product-info {
  padding: 0.1rem;
  padding-left: 0.15rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.product-title {
  font-size: 0.28rem;
		font-weight: bold;
  color: #333;
  margin-bottom: 0.03rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-subtitle {
  font-size: 0.2rem;
  color: #ff9900;
  margin-bottom: 0.06rem;
}
.price-row {
		display: flex;
		align-items: baseline;
  margin-bottom: 0.06rem;
}
.current-price {
  font-size: 0.22rem;
		color: #999;
		text-decoration: line-through;
  margin-right: 0.08rem;
}
.payment-count {
  font-size: 0.18rem;
  color: #999;
  font-weight: normal;
}
.actual-price-tag {
		display: flex;
		justify-content: flex-start;
		align-items: center;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  border-radius: 0.15rem;
  padding: 0.06rem 0.1rem;
  width: fit-content;
  margin-top: auto;
}
.actual-price-tag span:first-child {
  font-size: 0.18rem;
  color: #fff;
  margin-right: 0.05rem;
}
.actual-price-tag span:last-child {
   font-size: 0.2rem;
   color: #fff;
   font-weight: bold;
}
.banner-section {
  display: flex;
  padding: 0.2rem 0.3rem;
  margin-bottom: 0.2rem;
  background: #fff;
  border-radius: 0.2rem;
  box-shadow: 0 0.04rem 0.2rem rgba(0,0,0,0.05);
  align-items: stretch;
  width: auto;
  gap: 0.2rem;
}
.banner-swiper {
  flex: 1;
  height: auto;
  position: relative;
		overflow: hidden;
  border-radius: 0.2rem;
  background: #fff;
}
.swiper-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 1;
}
.swiper-slide.active {
  opacity: 1;
  z-index: 2;
}
.banner-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
  border-radius: 0.2rem;
}
.swiper-pagination {
  position: absolute;
		left: 0;
		right: 0;
  bottom: 0.12rem;
		display: flex;
		justify-content: center;
		align-items: center;
  z-index: 10;
}
.dot {
  display: inline-block;
  width: 0.14rem;
  height: 0.14rem;
  border-radius: 50%;
  background: #eee;
  margin: 0 0.06rem;
  transition: background 0.3s;
}
.dot.active {
  background: #ff9900;
	}
.right-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 0.2rem;
  box-shadow: 0 0.04rem 0.2rem rgba(0,0,0,0.05);
  padding: 0.15rem;
}
.right-sidebar-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.1rem;
}
</style>
